<%--
  Created by IntelliJ IDEA.
  User: MyUser
  Date: 2025/4/11
  Time: 15:11
  To change this template use File | Settings | File Templates.
--%>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <!-- 页面元信息 -->
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- Bootstrap 5 CSS from jsDelivr CDN -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">

    <!-- Bootstrap图标库 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">

    <title>管理员后台 - 广软课程论坛</title>

    <style>
        /* 自定义样式 */
        body {
            background-color: #f8f9fa;
        }
        .sidebar {
            width: 280px;
            height: 100vh;
            position: fixed;
            background-color: #343a40;
            color: white;
            padding-top: 20px;
        }
        .sidebar-header {
            padding: 0 1rem 1.5rem;
            border-bottom: 1px solid rgba(255,255,255,0.1);
        }
        .sidebar-menu {
            padding: 1rem 0;
        }
        .sidebar-menu .nav-link {
            color: rgba(255,255,255,0.8);
            padding: 0.75rem 1.5rem;
            border-left: 3px solid transparent;
        }
        .sidebar-menu .nav-link:hover {
            color: white;
            background-color: rgba(255,255,255,0.1);
        }
        .sidebar-menu .nav-link.active {
            color: white;
            background-color: rgba(255,255,255,0.1);
            border-left: 3px solid #0d6efd;
        }
        .sidebar-menu .nav-link i {
            margin-right: 0.5rem;
            width: 20px;
            text-align: center;
        }
        .main-content {
            margin-left: 280px;
            padding: 20px;
        }
        .admin-header {
            background-color: white;
            padding: 1rem;
            border-radius: 5px;
            margin-bottom: 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .admin-profile {
            display: flex;
            align-items: center;
        }
        .admin-avatar {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            object-fit: cover;
            margin-right: 10px;
        }
        .card {
            margin-bottom: 20px;
            border: none;
            box-shadow: 0 0 10px rgba(0,0,0,0.05);
        }
        .card-header {
            background-color: white;
            border-bottom: 1px solid rgba(0,0,0,0.05);
            font-weight: 600;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .table th {
            font-weight: 600;
            border-top: none;
        }
        .badge-user {
            background-color: #17a2b8;
        }
        .badge-admin {
            background-color: #dc3545;
        }
        .badge-teacher {
            background-color: #28a745;
        }
        .badge-student {
            background-color: #6c757d;
        }
        .status-badge {
            font-size: 0.75rem;
            padding: 0.35em 0.65em;
        }
        .status-active {
            background-color: #28a745;
        }
        .status-banned {
            background-color: #dc3545;
        }
        .action-dropdown .dropdown-menu {
            font-size: 0.875rem;
        }
        .action-dropdown .dropdown-item {
            padding: 0.25rem 1rem;
        }
        .action-dropdown .dropdown-item i {
            width: 20px;
            text-align: center;
            margin-right: 5px;
        }
        .search-box {
            max-width: 300px;
        }
        .nav-pills .nav-link.active {
            background-color: #0d6efd;
        }
    </style>
</head>
<body>
<!-- 侧边栏 -->
<div class="sidebar">
    <div class="sidebar-header">
        <div class="d-flex align-items-center">
            <img src="https://via.placeholder.com/40" alt="管理员头像" class="admin-avatar">
            <div>
                <div class="fw-bold">管理员</div>
                <div class="small text-muted">admin@example.com</div>
            </div>
        </div>
    </div>
    <div class="sidebar-menu">
        <ul class="nav flex-column">
            <li class="nav-item">
                <a class="nav-link active" href="#">
                    <i class="bi bi-speedometer2"></i>
                    控制面板
                </a>
            </li>
            <li class="nav-item mt-4">
                <a class="nav-link" href="#">
                    <i class="bi bi-box-arrow-right"></i>
                    退出登录
                </a>
            </li>
        </ul>
    </div>
</div>

<!-- 主内容区 -->
<div class="main-content">
    <!-- 顶部导航 -->
    <div class="admin-header">
        <h4>控制面板</h4>
        <div class="d-flex align-items-center">
            <div class="input-group search-box">
                <input type="text" class="form-control" placeholder="搜索...">
                <button class="btn btn-outline-secondary" type="button">
                    <i class="bi bi-search"></i>
                </button>
            </div>
        </div>
    </div>

    <!-- 统计卡片 -->
    <div class="row mb-4">
        <div class="col-md-3">
            <div class="card">
                <div class="card-body">
                    <div class="d-flex justify-content-between">
                        <div>
                            <h6 class="text-muted">总用户数</h6>
                            <h3>1,248</h3>
                        </div>
                        <div class="bg-primary bg-opacity-10 p-3 rounded">
                            <i class="bi bi-people text-primary" style="font-size: 1.5rem;"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card">
                <div class="card-body">
                    <div class="d-flex justify-content-between">
                        <div>
                            <h6 class="text-muted">总帖子数</h6>
                            <h3>5,678</h3>
                        </div>
                        <div class="bg-success bg-opacity-10 p-3 rounded">
                            <i class="bi bi-file-earmark-text text-success" style="font-size: 1.5rem;"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>

    <!-- 最新帖子 -->
    <div class="card">
        <div class="card-header">
            <span>最新帖子</span>
            <a href="#" class="btn btn-sm btn-outline-primary">查看全部</a>
        </div>
        <div class="card-body">
            <div class="table-responsive">
                <table class="table table-hover">
                    <thead>
                    <tr>
                        <th width="5%">ID</th>
                        <th width="25%">标题</th>
                        <th width="15%">作者</th>
                        <th width="10%">分类</th>
                        <th width="10%">点赞</th>
                        <th width="10%">评论</th>
                        <th width="15%">发布时间</th>
                        <th width="10%">操作</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <td>1056</td>
                        <td>Bootstrap 5最新特性详解</td>
                        <td>张三</td>
                        <td>技术</td>
                        <td>128</td>
                        <td>42</td>
                        <td>2023-06-15 14:30</td>
                        <td>
                            <div class="dropdown action-dropdown">
                                <button class="btn btn-sm btn-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown">
                                    操作
                                </button>
                                <ul class="dropdown-menu">
                                    <li><a class="dropdown-item" href="#"><i class="bi bi-eye"></i>查看</a></li>
                                    <li><a class="dropdown-item" href="#"><i class="bi bi-pencil"></i>编辑</a></li>
                                    <li><hr class="dropdown-divider"></li>
                                    <li><a class="dropdown-item text-danger" href="#"><i class="bi bi-trash"></i>删除</a></li>
                                </ul>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td>1055</td>
                        <td>JavaScript高级编程技巧</td>
                        <td>李四</td>
                        <td>技术</td>
                        <td>98</td>
                        <td>35</td>
                        <td>2023-06-14 09:15</td>
                        <td>
                            <div class="dropdown action-dropdown">
                                <button class="btn btn-sm btn-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown">
                                    操作
                                </button>
                                <ul class="dropdown-menu">
                                    <li><a class="dropdown-item" href="#"><i class="bi bi-eye"></i>查看</a></li>
                                    <li><a class="dropdown-item" href="#"><i class="bi bi-pencil"></i>编辑</a></li>
                                    <li><hr class="dropdown-divider"></li>
                                    <li><a class="dropdown-item text-danger" href="#"><i class="bi bi-trash"></i>删除</a></li>
                                </ul>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td>1054</td>
                        <td>校园活动摄影大赛通知</td>
                        <td>王五</td>
                        <td>公告</td>
                        <td>76</td>
                        <td>28</td>
                        <td>2023-06-13 16:45</td>
                        <td>
                            <div class="dropdown action-dropdown">
                                <button class="btn btn-sm btn-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown">
                                    操作
                                </button>
                                <ul class="dropdown-menu">
                                    <li><a class="dropdown-item" href="#"><i class="bi bi-eye"></i>查看</a></li>
                                    <li><a class="dropdown-item" href="#"><i class="bi bi-pencil"></i>编辑</a></li>
                                    <li><hr class="dropdown-divider"></li>
                                    <li><a class="dropdown-item text-danger" href="#"><i class="bi bi-trash"></i>删除</a></li>
                                </ul>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td>1053</td>
                        <td>课程设计经验分享</td>
                        <td>赵六</td>
                        <td>学习</td>
                        <td>65</td>
                        <td>19</td>
                        <td>2023-06-12 11:20</td>
                        <td>
                            <div class="dropdown action-dropdown">
                                <button class="btn btn-sm btn-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown">
                                    操作
                                </button>
                                <ul class="dropdown-menu">
                                    <li><a class="dropdown-item" href="#"><i class="bi bi-eye"></i>查看</a></li>
                                    <li><a class="dropdown-item" href="#"><i class="bi bi-pencil"></i>编辑</a></li>
                                    <li><hr class="dropdown-divider"></li>
                                    <li><a class="dropdown-item text-danger" href="#"><i class="bi bi-trash"></i>删除</a></li>
                                </ul>
                            </div>
                        </td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <!-- 用户管理 -->
    <div class="card mt-4">
        <div class="card-header">
            <span>用户管理</span>
            <div>
                <ul class="nav nav-pills">
                    <li class="nav-item">
                        <a class="nav-link active" href="#">全部</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">学生</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">教师</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">管理员</a>
                    </li>
                </ul>
            </div>
        </div>
        <div class="card-body">
            <div class="table-responsive">
                <table class="table table-hover">
                    <thead>
                    <tr>
                        <th width="5%">ID</th>
                        <th width="15%">用户名</th>
                        <th width="20%">邮箱</th>
                        <th width="10%">角色</th>
                        <th width="10%">状态</th>
                        <th width="15%">注册时间</th>
                        <th width="15%">最后登录</th>
                        <th width="10%">操作</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <td>1001</td>
                        <td>
                            <div class="d-flex align-items-center">
                                <img src="https://via.placeholder.com/40" alt="用户头像" class="rounded-circle me-2" width="30" height="30">
                                <span>admin</span>
                            </div>
                        </td>
                        <td>admin@example.com</td>
                        <td><span class="badge badge-admin status-badge">管理员</span></td>
                        <td><span class="badge status-active status-badge">正常</span></td>
                        <td>2023-01-10</td>
                        <td>2023-06-15 09:30</td>
                        <td>
                            <div class="dropdown action-dropdown">
                                <button class="btn btn-sm btn-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown">
                                    操作
                                </button>
                                <ul class="dropdown-menu">
                                    <li><a class="dropdown-item" href="#"><i class="bi bi-eye"></i>查看</a></li>
                                    <li><a class="dropdown-item" href="#"><i class="bi bi-pencil"></i>编辑</a></li>
                                    <li><hr class="dropdown-divider"></li>
                                    <li><a class="dropdown-item text-danger" href="#"><i class="bi bi-person-x"></i>禁用</a></li>
                                </ul>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td>1002</td>
                        <td>
                            <div class="d-flex align-items-center">
                                <img src="https://via.placeholder.com/40" alt="用户头像" class="rounded-circle me-2" width="30" height="30">
                                <span>张老师</span>
                            </div>
                        </td>
                        <td>zhang@example.com</td>
                        <td><span class="badge badge-teacher status-badge">教师</span></td>
                        <td><span class="badge status-active status-badge">正常</span></td>
                        <td>2023-02-15</td>
                        <td>2023-06-14 14:20</td>
                        <td>
                            <div class="dropdown action-dropdown">
                                <button class="btn btn-sm btn-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown">
                                    操作
                                </button>
                                <ul class="dropdown-menu">
                                    <li><a class="dropdown-item" href="#"><i class="bi bi-eye"></i>查看</a></li>
                                    <li><a class="dropdown-item" href="#"><i class="bi bi-pencil"></i>编辑</a></li>
                                    <li><hr class="dropdown-divider"></li>
                                    <li><a class="dropdown-item text-danger" href="#"><i class="bi bi-person-x"></i>禁用</a></li>
                                </ul>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td>1003</td>
                        <td>
                            <div class="d-flex align-items-center">
                                <img src="https://via.placeholder.com/40" alt="用户头像" class="rounded-circle me-2" width="30" height="30">
                                <span>李同学</span>
                            </div>
                        </td>
                        <td>li@example.com</td>
                        <td><span class="badge badge-student status-badge">学生</span></td>
                        <td><span class="badge status-banned status-badge">已禁用</span></td>
                        <td>2023-03-20</td>
                        <td>2023-05-10 11:45</td>
                        <td>
                            <div class="dropdown action-dropdown">
                                <button class="btn btn-sm btn-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown">
                                    操作
                                </button>
                                <ul class="dropdown-menu">
                                    <li><a class="dropdown-item" href="#"><i class="bi bi-eye"></i>查看</a></li>
                                    <li><a class="dropdown-item" href="#"><i class="bi bi-pencil"></i>编辑</a></li>
                                    <li><hr class="dropdown-divider"></li>
                                    <li><a class="dropdown-item text-success" href="#"><i class="bi bi-person-check"></i>恢复</a></li>
                                </ul>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td>1004</td>
                        <td>
                            <div class="d-flex align-items-center">
                                <img src="https://via.placeholder.com/40" alt="用户头像" class="rounded-circle me-2" width="30" height="30">
                                <span>王同学</span>
                            </div>
                        </td>
                        <td>wang@example.com</td>
                        <td><span class="badge badge-student status-badge">学生</span></td>
                        <td><span class="badge status-active status-badge">正常</span></td>
                        <td>2023-04-05</td>
                        <td>2023-06-15 08:15</td>
                        <td>
                            <div class="dropdown action-dropdown">
                                <button class="btn btn-sm btn-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown">
                                    操作
                                </button>
                                <ul class="dropdown-menu">
                                    <li><a class="dropdown-item" href="#"><i class="bi bi-eye"></i>查看</a></li>
                                    <li><a class="dropdown-item" href="#"><i class="bi bi-pencil"></i>编辑</a></li>
                                    <li><hr class="dropdown-divider"></li>
                                    <li><a class="dropdown-item text-danger" href="#"><i class="bi bi-person-x"></i>禁用</a></li>
                                </ul>
                            </div>
                        </td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<!-- Bootstrap 5 JS Bundle with Popper from jsDelivr CDN -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

<!-- 页面交互脚本 -->
<script>
    document.addEventListener('DOMContentLoaded', function() {
        // 这里可以添加页面交互逻辑
        // 例如: 表格排序、筛选、分页等功能

        // 模拟用户状态切换
        document.querySelectorAll('.action-dropdown .dropdown-item').forEach(item => {
            item.addEventListener('click', function(e) {
                if (this.classList.contains('text-danger') && this.querySelector('i').classList.contains('bi-person-x')) {
                    // 禁用用户
                    const row = this.closest('tr');
                    const statusBadge = row.querySelector('.status-badge');
                    statusBadge.classList.remove('status-active');
                    statusBadge.classList.add('status-banned');
                    statusBadge.textContent = '已禁用';

                    // 更改操作菜单
                    const dropdownMenu = this.closest('.dropdown-menu');
                    dropdownMenu.innerHTML = `
                            <li><a class="dropdown-item" href="#"><i class="bi bi-eye"></i>查看</a></li>
                            <li><a class="dropdown-item" href="#"><i class="bi bi-pencil"></i>编辑</a></li>
                            <li><hr class="dropdown-divider"></li>
                            <li><a class="dropdown-item text-success" href="#"><i class="bi bi-person-check"></i>恢复</a></li>
                        `;
                } else if (this.classList.contains('text-success') && this.querySelector('i').classList.contains('bi-person-check')) {
                    // 恢复用户
                    const row = this.closest('tr');
                    const statusBadge = row.querySelector('.status-badge');
                    statusBadge.classList.remove('status-banned');
                    statusBadge.classList.add('status-active');
                    statusBadge.textContent = '正常';

                    // 更改操作菜单
                    const dropdownMenu = this.closest('.dropdown-menu');
                    dropdownMenu.innerHTML = `
                            <li><a class="dropdown-item" href="#"><i class="bi bi-eye"></i>查看</a></li>
                            <li><a class="dropdown-item" href="#"><i class="bi bi-pencil"></i>编辑</a></li>
                            <li><hr class="dropdown-divider"></li>
                            <li><a class="dropdown-item text-danger" href="#"><i class="bi bi-person-x"></i>禁用</a></li>
                        `;
                }
            });
        });
    });
</script>
</body>
</html>
